<!doctype html>
<html lang="zh">
<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>xpopup</title>
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="./bootstrap/css/bootstrap.min.css" />
	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.min.css">
	<link rel="stylesheet" href="./css/xpopup.css" />
</head>
<body>
	<button type="button" id="alert_btn">alert_btn</button>
	<button type="button" id="prompt_btn">prompt_btn</button>
	<button type="button" id="confirm_btn">confirm_btn</button>
	<button type="button" id="progress_btn">progress_btn</button>
	<button type="button" id="win_btn">win_btn</button>
	
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="./js/xpopup.js"></script>
<script>
/* Alert */
$('#alert_btn').click(function () {
	var xalert = xpopup.alert({
		type : 'error',
		title : '登录出错',
		msg : "Lorem ipsum dolor sit amet byron frown tumult minstrel wicked clouded bows columbine full",
		buttons : [{
			id : 'btnOk',
			text : 'OK',
			'class' : '',
			handler : function($this) {
				$this.destroy();
			}
		}]
	});
});

/* Prompt */
$('#prompt_btn').click(function () {
    xpopup.prompt('text', {
        title: 'Please enter username',
        attrs: {
            placeholder: "Username"
        }
    });
});

/* Confirm */
$('#confirm_btn').click(function () {
    xpopup.confirm({
        msg: "Are you sure you want to delete this user?",
    });
});
            
/* Progress */
$('#progress_btn').click(function () {
    var inter;
    xpopup.progress({
        title: 'Please wait',
        label: 'Uploading files...',
        beforeShow: function ($this) {
            var i = 0;
            inter = setInterval(function () {
                //window.console.log(i);
                if (i > 100) {
                    inter = clearInterval(inter);
                }
                i = i + 0.1;
                $this.setProgress(i);
            }, 10);
        },
        closed: function () {
            inter = clearInterval(inter);
        }
    });
});

var strDom = '\
<form class="userForm" id="userForm">\
	<table class="extTable">\
<tr class="hide">\
	<td>Id:</td>\
	<td><input name="id" /></td>\
</tr>\
<tr>\
	<td>用户名:</td>\
	<td><input name="username" class="form-input" /></td>\
	<td>姓名:</td>\
	<td><input name="realName" class="form-input" /></td>\
</tr>\
</table>\
</form>\
';
/* window */
$('#win_btn').click(function () {
	xpopup.window({
	    width: 600,
	    content: strDom,
        buttons: [{
			id:	'btnOk',
			text: '确定',
			'class': 'btn btn-info',
			handler: function ($this) {
				xpopup.notify('success', {
					title: $('[name=username]').val(),
					msg: 'You have clicked "Yes" button.',
					delay: 1000
				});
				$this.destroy();
			}
		}, {
			id:	'btnCancel',
			text: '取消',
			'class': 'btn btn-default',
			handler: function ($this) {
				$this.destroy();
			}
		}],
        afterShow: function ($this) {
			//
        }
	});
});
</script>
</body>
</html>
